const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const name = require("./package.json").name;
function resolve(dir) {
  return path.join(__dirname, dir);
}
const BASE_API = process.env.VUE_APP_BASE_API;
const PROXY_TARGET = process.env.VUE_APP_PROXY_TARGET;
const OSS_API = process.env.VUE_APP_OSS_API;
const OSS_TARGET = process.env.VUE_APP_OSS_URL;
module.exports = defineConfig({
  publicPath: "/",
  devServer: {
    hot: true,
    host: "0.0.0.0",
    port: 8888, // 端口号
    compress: true, // 是否启动压缩 gzip
    headers: {
      "Access-Control-Allow-Origin": "*" // 让当前、前端服务支持任何形式的请求访问（qiankun需要支持跨域访问子应用）
    },
    proxy: {
      [BASE_API]: {
        // api开头的请求将会被代理到 localhost:3000
        target: PROXY_TARGET,
        changeOrigin: true, // 支持跨域
        secure: false // 支持https
      },
      [OSS_API]: {
        // api开头的请求将会被代理到 localhost:3000
        target: OSS_TARGET,
        changeOrigin: true, // 支持跨域
        secure: false // 支持https
      }
    }
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true // 用于支持按需引入 antd-vue 样式
        }
      }
    }
  },
  configureWebpack: config => {
    config.name = name;
    config.resolve.alias = {
      "@": resolve("src")
    };
    // 修改打包入口文件大小限制（去除打包太大警告）
    config.performance = {
      // 入口起点的最大体积
      maxEntrypointSize: 20971520,
      // 生成文件的最大体积
      maxAssetSize: 20971520
    };
    // 环境判断
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(config.optimization.minimizer[0].options.minimizer.options.compress, {
        drop_console: true
      });
    } else {
      // 为开发环境修改配置...
      config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(config.optimization.minimizer[0].options.minimizer.options.compress, {
        drop_console: true
      });
    }
    // output: {
    //   // 微应用的包名，这里与主应用中注册的微应用名称一致
    //   library: name,
    //   // 将你的 library 暴露为所有的模块定义下都可运行的方式
    //   libraryTarget: "umd",
    //   // 按需加载相关，设置为 webpackJsonp_微应用名称 即可
    //   jsonpFunction: `webpackJsonp_${name}`,
    // },
  },
  chainWebpack: config => {
    config.plugin("html").tap(args => {
      args[0].title = process.env.VUE_APP_TITLE;
      return args;
    });
    config.plugin("CompressionPlugin").use("compression-webpack-plugin", [
      {
        filename: "[path][base].gz",
        algorithm: "gzip",
        test: /\.ts$|\.js$|\.css$|\.html$/,
        threshold: 10240, // 只处理比这个值大的资源。按字节计算
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
        //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
        // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
        deleteOriginalAssets: false
      }
    ]);
    config.optimization.splitChunks({
      chunks: "all",
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.(s?css|less|sass)$/,
          priority: 10
        },
        common: {
          name: "chunk-common",
          test: resolve("src/components"),
          minChunks: 2, // 拆分前必须共享模块的最小 chunks 数。
          maxInitialRequests: 5, // 打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件）
          minSize: 0, // 生成 chunk 的最小体积（≈ 20kb)
          priority: 25, // 优化将优先考虑具有更高 priority（优先级）的缓存组
          reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
        },
        store: {
          name: "chunk-store",
          test: resolve("src/store"),
          minChunks: 3,
          priority: 25,
          reuseExistingChunk: true
        },
        vue: {
          name: "vue",
          test: /[\\/]node_modules[\\/]vue[\\/]/,
          priority: 25
        },
        "vue-router": {
          name: "vue-router",
          test: /[\\/]node_modules[\\/]vue-router[\\/]/,
          priority: 25
        },
        vuex: {
          name: "vuex",
          test: /[\\/]node_modules[\\/]vuex[\\/]/,
          priority: 25
        },
        "vxe-table": {
          name: "vxe-table",
          test: /[\\/]node_modules[\\/]vxe-table[\\/]/,
          priority: 25
        },
        "ant-design-vue": {
          name: "ant-design-vue",
          test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
          priority: 25
        },
        lodash: {
          name: "lodash",
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          priority: 25
        },
        xlsx: {
          name: "xlsx",
          test: /[\\/]node_modules[\\/]xlsx[\\/]/,
          priority: 25
        },
        vendors: {
          name: "chunk-vendors",
          test: /[\\/]node_modules[\\/]/,
          priority: 25,
          chunks: "initial"
        }
      }
    });
  },
  transpileDependencies: true,
  productionSourceMap: false
});
